@import "./common/mixin.scss";
@import "./common/vars.scss";
@import "./common/utils.scss";

@include module(input) {
  white-space: nowrap;
  display: inline-block;
  cursor: auto;
  transition: all 0.2s ease;
  position: relative;
  line-height: $--input-default-line-height;
  font-size: $--font-size-base;

  & > .before-icon {
    font-size: inherit;
    color: $--color-text-disabled;
    position: absolute;
    line-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    left: 0;
    top: 1px;
  }

  & > .after-icon {
    font-size: inherit;
    color: $--color-text-disabled;
    position: absolute;
    line-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    right: 0;
    top: 1px;

    &.clear-icon {
      display: none;
      right: 0;
    }
  }

  & > .after-limit {
    color: $--color-text-disabled;
    font-size: $--font-size-extra-small;
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    right: 0;
    top: 1px;
  }

  &:hover {
    & > .after-icon {
      &.clear-icon {
        display: flex;
      }
    }
  }

  @include modifier(small) {
    font-size: $--input-small-font-size;
    line-height: $--input-small-line-height;
    width: 160px;
  }
  @include modifier(mini) {
    width: 150px;
    font-size: $--input-mini-font-size;
    line-height: $--input-mini-line-height;
  }

  &.is-focus {
    .as-input__inner {
      border-color: mix(
        $--color-black,
        $--border-color-base,
        $--color-active-percent
      );
    }
  }
  &.is-hover {
    .as-input__inner {
      border-color: mix(
        $--color-black,
        $--border-color-base,
        $--color-active-percent
      );
    }
  }

  @include element(inner) {
    transition: all 0.2s ease;
    padding: 0 $--input-default-padding-horizontal;
    border: solid 1px $--border-color-base;
    border-radius: $--border-radius-base;
    width: inherit;
    box-sizing: border-box;
    @include modifier(small) {
      padding: 0 $--input-small-padding-horizontal;
    }

    @include modifier(mini) {
      padding: 0 $--input-mini-padding-horizontal;
    }

    font-size: inherit;
    line-height: inherit;
    cursor: auto;
    color: $--color-text-regular;
    outline: none;

    &:hover {
      border-color: mix(
        $--color-black,
        $--border-color-base,
        $--color-active-percent
      );
    }

    @include when(active) {
      border-color: $--color-primary;
    }

    @include modifier(danger) {
      &,
      &.is-active,
      &:hover {
        border-color: $--color-danger;
      }

      &.after-limit {
        @debug &;
        color: $--color-danger;
      }
    }

    &::placeholder {
      color: $--color-input-place;
    }
  }

  .as-input__prepend + .as-input__append + .as-input__inner,
  .as-input__prepend + .as-input__inner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .as-input__append + .as-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  @include element(prepend) {
    float: left;

    cursor: default;
    display: inline-block;

    line-height: inherit;
    font-size: inherit;

    padding: 0 10px;

    border: solid 1px $--border-color-base;
    border-right: none;

    border-top-left-radius: $--border-radius-base;
    border-bottom-left-radius: $--border-radius-base;
    background: #eaeaea;
    color: #666;

    .as-button {
      border: none;
      background: transparent;
    }
  }

  @include element(append) {
    float: right;
    background: $--input-slot-bg-color;

    cursor: default;
    display: inline-block;

    line-height: inherit;
    font-size: inherit;

    padding: 0 20px;

    border: solid 1px $--border-color-base;
    border-left: none;

    border-top-right-radius: $--border-radius-base;
    border-bottom-right-radius: $--border-radius-base;
    background: #eaeaea;
    color: #666;

    .as-button {
      float: right;
      border: none;
      background: transparent;
      color: inherit;
      padding-left: 10px;
      padding-right: 10px;
      line-height: inherit;
      padding: 0;
    }
  }

  @include when(disabled) {
    cursor: not-allowed;
    .as-button,
    .as-input__inner,
    .as-input__append,
    .as-input__prepend {
      cursor: not-allowed;
      color: mix($--color-white, $--color-text-disabled);
    }
    .as-input__inner {
      background: $--color-disabled-input;
      &,
      &:hover,
      &.is-active {
        border-color: $--border-color-disabled;
      }
      &::placeholder {
        color: mix(
          $--color-white,
          $--color-input-place,
          $--color-disabled-percent
        );
      }
    }

    .as-input__append,
    .as-input__prepend {
      background: mix(
        $--color-white,
        $--input-slot-bg-color,
        $--color-disabled-percent
      );
      border-color: $--border-color-disabled;
      color: mix(
        $--color-white,
        $--color-text-regular,
        $--color-disabled-percent
      );
    }

    .before-icon,
    .after-icon,
    .after-limit {
      color: mix(
        $--color-white,
        $--color-text-disabled,
        $--color-disabled-percent
      );
    }

    .as-textarea {
      .as-textarea__inner {
        cursor: not-allowed;
        background: white;
        color: mix(
          $--color-white,
          $--color-text-regular,
          $--color-disabled-percent
        );
        border-color: mix(
          $--color-white,
          $--border-color-base,
          $--color-disabled-percent
        );

        &.as-textarea__inner--danger {
          border-color: mix(
            $--color-white,
            $--color-danger,
            $--color-disabled-percent
          );

          & + .after-limit {
            color: mix(
              $--color-white,
              $--color-danger,
              $--color-disabled-percent
            );
          }
        }
      }
    }
  }
}

@include module(textarea) {
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
  color: $--color-text-regular;

  width: 300px;
  position: relative;
  height: 79px;

  @include element(inner) {
    border-radius: $--border-radius-base;
    // height: 63px;
    font-size: inherit;
    line-height: inherit;
    padding: $--textarea-padding-vertical $--textarea-padding-horizontal;
    color: inherit;
    height: inherit;
    border: none;
    outline: none;
    width: 100%;
    resize: none;
    border: solid 1px $--border-color-base;
    box-sizing: border-box;

    &::placeholder {
      color: $--color-input-place;
    }
  }

  .after-limit {
    position: absolute;
    bottom: 2px;
    right: 12px;
  }

  .as-textarea__inner--danger {
    border-color: $--color-danger;
    & + .after-limit {
      color: $--color-danger;
    }
  }
}
